<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单点登录限制技术深度解析</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
        }
        .serif-title {
            font-family: 'Noto Serif SC', serif;
        }
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            border-radius: 8px;
            overflow-x: auto;
        }
        .code-block pre {
            margin: 0;
            padding: 1.5rem;
            font-size: 0.875rem;
            line-height: 1.5;
        }
        .section-divider {
            height: 1px;
            background: linear-gradient(to right, transparent, #e5e7eb, transparent);
            margin: 3rem 0;
        }
        .floating-icon {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        .drop-cap {
            float: left;
            font-size: 4rem;
            line-height: 1;
            font-weight: 700;
            margin-right: 0.5rem;
            margin-top: -0.1rem;
            color: #667eea;
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="relative overflow-hidden bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 text-white">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative container mx-auto px-6 py-24">
            <div class="max-w-4xl mx-auto text-center">
                <div class="mb-8">
                    <i class="fas fa-shield-alt text-6xl floating-icon opacity-80"></i>
                </div>
                <h1 class="text-5xl md:text-6xl font-bold mb-6 serif-title">
                    单点登录限制技术深度解析
                </h1>
                <p class="text-xl md:text-2xl mb-8 opacity-90 leading-relaxed">
                    从原理到实践，构建安全高效的用户认证体系
                </p>
                <div class="flex justify-center space-x-8 text-sm">
                    <div class="flex items-center">
                        <i class="fas fa-clock mr-2"></i>
                        <span>阅读时长：25分钟</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-code mr-2"></i>
                        <span>包含代码示例</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-chart-line mr-2"></i>
                        <span>实战案例分析</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="#F9FAFB"/>
            </svg>
        </div>
    </section>

    <!-- Introduction -->
    <section class="container mx-auto px-6 py-16">
        <div class="max-w-4xl mx-auto">
            <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12 card-hover">
                <p class="text-lg leading-relaxed text-gray-700">
                    <span class="drop-cap serif-title">在</span>当今数字化时代，用户账号安全已成为每个应用系统的核心关注点。想象一下，如果你的银行账号可以同时在多个设备上登录，你的资金安全将面临怎样的风险？单点登录限制正是解决这一问题的关键技术。从电商平台到企业管理系统，从在线教育到金融应用，几乎所有需要用户认证的场景都需要考虑登录限制。这不仅关乎用户体验，更是数据安全的重要保障。
                </p>
            </div>
        </div>
    </section>

    <!-- Architecture Overview -->
    <section class="container mx-auto px-6 py-8">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12 serif-title">系统架构概览</h2>
            <div class="bg-white rounded-2xl shadow-lg p-8">
                <div class="mermaid">
                    graph TB
                        A[用户登录请求] --> B{身份验证}
                        B -->|成功| C[会话管理器]
                        B -->|失败| D[返回错误]
                        C --> E{检查现有会话}
                        E -->|存在| F[强制下线旧会话]
                        E -->|不存在| G[创建新会话]
                        F --> G
                        G --> H[生成令牌]
                        H --> I[存储会话信息]
                        I --> J[返回登录成功]
                        
                        style A fill:#f9f,stroke:#333,stroke-width:2px
                        style J fill:#9f9,stroke:#333,stroke-width:2px
                        style D fill:#f99,stroke:#333,stroke-width:2px
                </div>
            </div>
        </div>
    </section>

    <!-- Core Principles -->
    <section class="container mx-auto px-6 py-16">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-4xl font-bold mb-4 serif-title gradient-text">一、单点登录限制的核心原理</h2>
            <p class="text-gray-600 mb-12 text-lg">深入理解会话管理、令牌验证和设备标识的技术细节</p>
            
            <div class="grid md:grid-cols-3 gap-8 mb-12">
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-key text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">会话管理机制</h3>
                    <p class="text-gray-600">通过唯一会话标识绑定用户账号，实现精确的登录状态控制</p>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-certificate text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">令牌验证策略</h3>
                    <p class="text-gray-600">使用JWT等现代令牌技术，确保身份验证的安全性和可扩展性</p>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="text-blue-600 mb-4">
                        <i class="fas fa-fingerprint text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">设备标识技术</h3>
                    <p class="text-gray-600">通过设备指纹精确识别不同登录设备，增强安全控制</p>
                </div>
            </div>

            <!-- Session Management Code Example -->
            <div class="mb-12">
                <h3 class="text-2xl font-bold mb-6 flex items-center">
                    <i class="fas fa-code mr-3 text-purple-600"></i>
                    会话管理核心逻辑示例
                </h3>
                <div class="code-block">
                    <pre><code>public class SessionManager {
    private Map&lt;String, UserSession&gt; activeSessions = new ConcurrentHashMap&lt;&gt;();
    
    public boolean login(String userId, String sessionId) {
        // 检查是否已存在活跃会话
        UserSession existingSession = activeSessions.get(userId);
        if (existingSession != null) {
            // 强制下线旧会话
            invalidateSession(existingSession.getSessionId());
        }
        
        // 创建新会话
        UserSession newSession = new UserSession(userId, sessionId, System.currentTimeMillis());
        activeSessions.put(userId, newSession);
        return true;
    }
}</code></pre>
                </div>
            </div>

            <!-- JWT Token Validation -->
            <div class="mb-12">
                <h3 class="text-2xl font-bold mb-6 flex items-center">
                    <i class="fas fa-shield-alt mr-3 text-indigo-600"></i>
                    JWT令牌验证示例
                </h3>
                <div class="code-block">
                    <pre><code>public class JwtTokenValidator {
    public boolean validateToken(String token, String userId) {
        try {
            Claims claims = Jwts.parser()
                .setSigningKey(secretKey)
                .parseClaimsJws(token)
                .getBody();
            
            // 检查用户ID是否匹配
            String tokenUserId = claims.getSubject();
            if (!userId.equals(tokenUserId)) {
                return false;
            }
            
            // 检查令牌是否过期
            Date expiration = claims.getExpiration();
            return !expiration.before(new Date());
        } catch (Exception e) {
            return false;
        }
    }
}</code></pre>
                </div>
            </div>
        </div>
    </section>

    <div class="section-divider"></div>

    <!-- Traditional Session Solutions -->
    <section class="container mx-auto px-6 py-16">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-4xl font-bold mb-4 serif-title gradient-text">二、传统Session方案实现</h2>
            <p class="text-gray-600 mb-12 text-lg">从内存存储到分布式部署的演进之路</p>

            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-xl p-8">
                    <h3 class="text-2xl font-bold mb-4 flex items-center">
                        <i class="fas fa-memory mr-3 text-purple-600"></i>
                        内存存储方案
                    </h3>
                    <p class="text-gray-700 mb-4">最简单的实现方式，适合单机部署的小型应用。通过ConcurrentHashMap等线程安全的数据结构存储会话信息。</p>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                            <span>实现简单，性能优秀</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-500 mr-2 mt-1"></i>
                            <span>存在单点故障风险</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-500 mr-2 mt-1"></i>
                            <span>不支持分布式部署</span>
                        </li>
                    </ul>
                </div>

                <div class="bg-gradient-to-br from-indigo-50 to-blue-50 rounded-xl p-8">
                    <h3 class="text-2xl font-bold mb-4 flex items-center">
                        <i class="fas fa-database mr-3 text-indigo-600"></i>
                        数据库存储方案
                    </h3>
                    <p class="text-gray-700 mb-4">使用关系型数据库持久化会话信息，解决了数据丢失问题，但增加了数据库压力。</p>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                            <span>数据持久化，可